import { Button, Form, Input, Modal, Radio } from "antd";
import React, { useState } from "react";
import url from "../../../config/url";
import req from "../../../http/req";
const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  return (
    <Modal
      visible={visible}
      title="添加大棚信息"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            // console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: "public",
        }}
      >
        <Form.Item
          name="username"
          label="用户名"
          rules={[
            {
              required: true,
              message: "请输入用户名!",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="mobile"
          label="手机号"
          rules={[
            {
              pattern: /^[1][3-9][\d]{9}/,
              required: true,
              message: "请输入正确的手机号!",
            },
          ]}
        >
          <Input type="textarea" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ len: 6, required: true, message: "请输入密码!" }]}
        >
          <Input type={"password"} />
        </Form.Item>
        <Form.Item name="gender" label="性别">
          <Radio.Group>
            <Radio value="1">男</Radio>
            <Radio value="2">女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="email"
          label="邮箱"
          rules={[
            {
              required: true,
              message: "请输入正确邮箱!",
            },
          ]}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

const Tianjia = () => {
  const [visible, setVisible] = useState(false);

  const onCreate = (values) => {
    // console.log("Received values of form: ", values);
    values.gender = values.gender - 0;
    values.mobile = values.mobile - 0;
    //   发送
    req.post(url.PostUserAdd, values).then((res) => {
      // console.log(res);
    });
    setVisible(false);
  };
  return (
    <div>
      <Button
        key="1"
        size="large"
        type="primary"
        onClick={() => {
          setVisible(true);
        }}
      >
        添加用户
      </Button>
      <CollectionCreateForm
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  );
};

export default Tianjia;
